<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				border:10px solid #666;
				padding:8px 15px;
				background: #2D3A4B;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<button id="btn">A+</button>
		<button id="btn2">A-</button>
		<div id="box">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt repellat architecto neque nobis commodi fuga in corporis repellendus recusandae aut aperiam unde voluptatem provident itaque ut pariatur enim dolorem facere?
		</div>
		
		<script>
			let oBtn = document.getElementById('btn');
			let oBox = document.getElementById('box');
			let oBtn2 = document.getElementById('btn2');
			let font = 16;
			oBtn.onclick = function(){
				tab(0);
			}
			oBtn2.onclick = function(){
				tab(1);
			}
			
			function tab(a){
				if(a == 0){
					font = font + 2;
					if(font > 26){
						font = 26;
					}
				}else{
					font = font - 2;
					if(font < 14){
						font = 14;
					}
				}
				oBox.style.fontSize = font + 'px';
			}
		</script>
	</body>
</html>
